<template>
	<view class="user-stored-list" :style="{background:pageColor}">
		<view class="stored-card-item  mt-md ml-md mr-md pd-lg fill-base radius-16 rel"
			:class="[{'grayscale':item.is_over}]" v-for="(item,index) in list.data" :key="index">
			<image class="abs card-img" :src="`https://www.peikangbao.cn/admin/anmo/balancediscount/card-bg.png`"></image>
			<view class="card-time flex-center f-icontext c-base abs" :style="{background:primaryColor}">
				{{item.is_over?`已过期`:`${item.over_time} 到期`}}
			</view>
			<view class="rel flex-between">
				<view class="flex-between" :class="[{'mt-lg':item.discount}]">
					<view style="width:285rpx">
						<view class="flex-y-baseline f-caption c-black" style="height:78rpx">
							<view style="font-size: 70rpx">{{item.pay_price}}</view>
							元
						</view>
						<view class="f-paragraph mt-md" style="color:#323E3A">
							{{item.title}}
						</view>
					</view>
					<view class="card-text flex-y-center f-icontext c-base">享
						<view class="f-title text-bold">
							{{item.discount||0}}
						</view>折优惠
					</view>
				</view>
				<view style="width:184rpx">
					<view class="flex-y-baseline f-paragraph c-title text-bold">
						<view class="f-md-title">{{item.cash||0}}</view>元
					</view>
					<view>当前余额</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1" :isCenter="true"></abnor>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {},
		data() {
			return {
				options: {},
				param: {
					page: 1,
					limit: 10
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: false,
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.options = options
			await this.initIndex()
			if (this.scanRecordId) {
				this.updateScanRecord()
			}
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getMineInfo', 'addScanRecord',
				'updateScanRecord', 'updateCommonOptions'
			]),
			...mapMutations(['updateOrderItem', 'updateUserItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let newList = await this.$api.mine.cardOrderList(param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			}
		}
	}
</script>


<style lang="scss"> 
	.user-stored-list {

		.stored-card-item {
			width: 710rpx;
			height: 232rpx;
			background: linear-gradient(184deg, #C9F5E4 0%, #FFFFFF 100%);
			border-radius: 26rpx;
			border: 4rpx solid #FFFFFF;

			.card-time {
				top: 0;
				left: 0;
				min-width: 110rpx;
				height: 40rpx;
				padding: 0 25rpx;
				border-radius: 22rpx 0 32rpx 0;
			}

			.card-text {
				min-width: 128rpx;
				height: 45rpx;
				padding: 0 10rpx;
				background: linear-gradient(270deg, #FF6453 0%, #FF6262 68%, #FFC86F 100%);
				border-radius: 66rpx 66rpx 66rpx 0;
				// border: 1rpx solid #FFFFFF;
			}

			.card-img {
				width: 328rpx;
				height: 195rpx;
				top: 29rpx;
				left: 164rpx;
			}

			.share-btn {
				width: 150rpx;
				height: 56rpx;
				border-radius: 31rpx;
				border: 2rpx solid #fff;
			}
		}

	}
</style>